<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/axios.min.js"></script>
  </head>
  <body>
    <h2>购物车列表</h2>
    <ul>
      <!-- <li>
        <h2></h2>
        <img src="" alt="" />
        <p></p>
        <input type="number" name="" id="" value="" />
        <button>删除</button>
      </li> -->
    </ul>
    <script>
      loadCartList();

      // 加载购物车列表
      /* 
      接口地址：http://jx.xuzhixiang.top/ap/api/cart-list.php
    接口请求方式：get
    接口参数：
         id  用户id
      */
      async function loadCartList() {
        let cartListAPI = "http://jx.xuzhixiang.top/ap/api/cart-list.php";
        let id = localStorage.getItem("id");
        let res = await axios.get(cartListAPI, { params: { id: id } });
        console.log(res.data);
        let cartArr = res.data.data;
        //根据服务返回的购物车数组-生成 页面结构
        let resArr = cartArr.map(
          (v) => `
                <li>
                    <h2>${v.pname}</h2>
                    <img src="${v.pimg}" alt="" />
                    <p>${v.pprice}</p>
                    <input type="number" name="" id="" value="${v.pnum}" />
                    <button onclick="delCart(${v.pid})">删除</button>
                </li>`
        );
        console.log(resArr);

        let ul = document.querySelector("ul");
        ul.innerHTML = resArr.join("");
      }

      // 删除功能
      /* 
      删除用户购物车中的商品 接口

    接口地址：http://jx.xuzhixiang.top/ap/api/cart-delete.php
    接口请求方式：get
    接口参数：
         uid  用户id
         pid  商品id
      */
      async function delCart(pid) {
        console.log(pid);
        let uid = localStorage.getItem("id");
        let delCartAPI = "http://jx.xuzhixiang.top/ap/api/cart-delete.php";
        let res = await axios.get(delCartAPI, { params: { uid, pid } });
        console.log(res.data);
        //重新加载购物车列表 或者 删除dom元素
        loadCartList();
      }
    </script>
  </body>
</html>
